website bán đồng hồ,đồ án tốt nghiệp,Code Website Bán Đồng Hồ

Ảnh demo (10)

Xem LIVE DEMO

[Mã code 82404]

Full Source Code Website Bán Đồng Hồ dùng ReactJS, NodeJS, MongoDB

(1 Đánh giá)

0 33

Source code đồ án Website Bán Đồng Hồ trọn gói xây dựng trên nền tảng MERN Stack (ReactJS, NodeJS, MongoDB). Tích hợp các tính năng cao cấp: Thanh toán online VNPAY, Đăng nhập Google OAuth 2.0.

Danh mục

Javascript

Thể loại

WebsiteBán hàng - TMĐT

Ngày đăng

27-1-2026

Loại file

Full code

File download

watchstore.zip [ MB]

Gửi thông báo lỗi Báo vi phạm bản quyền

Gửi ngay

CAM KẾT TỪ NGƯỜI BÁN

Hỗ trợ cài đặt qua UltraViewer/TeamViewer cho đến khi chạy được project.

Giải đáp các thắc mắc về luồng code và cấu trúc thư mục. Cam kết source code chạy 100% như demo.

Minh Tuyền

(Hạng vàng)
Xem trang

Source code
1

Đánh giá (1)
5/5

Ngày tham gia
18/1/2026

GIỚI THIỆU TỔNG QUAN: Đây là bộ Source Code Đồ án tốt nghiệp/Đồ án chuyên ngành đạt điểm cao, được xây dựng trên nền tảng công nghệ hiện đại nhất hiện nay là MERN Stack. Project phù hợp cho các bạn sinh viên muốn tìm hiểu về kiến trúc Single Page Application (SPA) và RESTful API.

CÔNG NGHỆ SỬ DỤNG:

Frontend: ReactJS (Functional Component, Hooks), Redux Toolkit (quản lý state), Axios, TailwindCSS/Bootstrap.
Backend: NodeJS, ExpressJS.
Database: MongoDB (NoSQL).
Tích hợp bên thứ 3: Cổng thanh toán VNPAY Sandbox, Xác thực Google OAuth 2.0.

CÁC CHỨC NĂNG CHÍNH (FULL FEATURES):

1. Phân hệ Khách hàng (Customer):

Đăng ký/Đăng nhập: Hỗ trợ đăng nhập nhanh bằng tài khoản Google hoặc tài khoản thường (JWT Authentication).
Trang chủ: Slider banner, hiển thị sản phẩm mới, sản phẩm bán chạy.
Sản phẩm: Xem chi tiết, lọc sản phẩm theo giá, thương hiệu, danh mục.
Giỏ hàng: Thêm/sửa/xóa sản phẩm, tính tổng tiền tự động.
Thanh toán (Checkout):
- Thanh toán khi nhận hàng (COD).
- Được chọn mã giảm giá
- Thanh toán online qua ví VNPAY (Có xử lý IPN cập nhật trạng thái đơn hàng tự động).
Quản lý cá nhân: Xem lịch sử đơn hàng, cập nhật thông tin profile.

2. Phân hệ Quản trị (Admin):

Dashboard: Thống kê doanh thu, số lượng đơn hàng, số lượng người dùng (Biểu đồ trực quan).
Quản lý Sản phẩm: Thêm, sửa, xóa, upload ảnh sản phẩm.
Quản lý Đơn hàng: Xem chi tiết đơn hàng, cập nhật trạng thái (Đang xử lý -> Đang giao -> Đã giao).
Quản lý Người dùng: Xem danh sách khách hàng.
Quản lý mã giảm giá: Xem và thêm mã giảm giá.

XEM THÊM ==> Hướng dẫn cài đặt chi tiết

HÌNH ẢNH DEMO

HƯỚNG DẪN CÀI ĐẶT

YÊU CẦU MÔI TRƯỜNG (PREREQUISITES)

Trước khi bắt đầu, máy tính của bạn cần cài sẵn:

NodeJS: Phiên bản 22.12.0.
MongoDB: Cài đặt MongoDB Compass (để chạy local) hoặc có tài khoản MongoDB Atlas (Cloud).
Trình soạn thảo: VS Code.

CÀI ĐẶT SERVER (BACKEND)

Đây là nơi xử lý dữ liệu và thanh toán.

Bước 1: Giải nén file code, mở thư mục backend bằng VS Code.
Bước 2: Mở Terminal (Ctrl + `) và chạy lệnh cài đặt thư viện:
npm install

Bước 3: Tạo file cấu hình môi trường.

PORT=5000
MONGO_URI=mongodb://localhost:27017/ten_database_cua_ban

# Cấu hình bảo mật JWT
JWT_SECRET=bi_mat_khong_bat_mi_123
JWT_EXPIRES_IN=7d

# Cấu hình đường dẫn
BACKEND_URL=http://localhost:5000
API_BASE=/api
FRONTEND_URL=http://localhost:5173

# CẤU HÌNH VNPAY (SANDBOX)
# Đăng ký tại: sandbox.vnpayment.vn/merchantv2
VNP_TMN_CODE=DIEN_MA_TMN_CUA_BAN
VNP_HASH_SECRET=DIEN_MA_SECRET_CUA_BAN
VNP_URL=https://sandbox.vnpayment.vn/paymentv2/vpcpay.html
VNP_RETURN_URL=http://localhost:5000/api/payment/vnpay-return

# CẤU HÌNH GOOGLE LOGIN
# Lấy tại: console.cloud.google.com
GOOGLE_CLIENT_ID=DIEN_CLIENT_ID_CUA_BAN
GOOGLE_CLIENT_SECRET=DIEN_CLIENT_SECRET_CUA_BAN

Hướng dẫn lấy key nhanh:

MONGO_URI: Nếu dùng MongoDB Compass local, link thường là mongodb://localhost:27017/WatchStore.

VNPAY: Đăng ký tài khoản test tại sandbox.vnpayment.vn, vào email lấy VNP_TMN_CODE và VNP_HASH_SECRET điền vào.

Google: Nếu chưa biết lấy, bạn có thể để trống tạm thời (chức năng login Google sẽ không chạy, nhưng web vẫn hoạt động bình thường).

Tại thư mục gốc của backend, bạn tạo một file mới đặt tên là .env
Copy toàn bộ nội dung bên dưới dán vào file .env:

Bước 4: Tại thư mục backend, chạy lệnh node seeder.js để đưa dữ liệu lên mongodb
Bước 5: Khởi chạy backend: npm run dev

CÀI ĐẶT CLIENT (FRONTEND)

Đây là giao diện người dùng hiển thị trên trình duyệt.

Bước 1: Mở thư mục frontend bằng VS Code.
Bước 2: Mở Terminal và chạy lệnh:
npm install
Bước 3: Cấu hình kết nối tới Server.
- Tạo file mới tên là .env trong thư mục frontend.
- Dán nội dung sau vào:
VITE_API_URL=http://localhost:5000
(Lưu ý: Port 5000 phải trùng với PORT bạn đã khai báo bên Server)
Bước 4: Khởi chạy Website:
npm run dev
Sau khi chạy xong bước 3, Terminal sẽ hiện đường dẫn Localhost (thường là http://localhost:5173)
Giữ phím Ctrl và click vào link đó để mở trình duyệt.